<template>
  <view>
    <view class="topPart" :style="{backgroundImage: 'url(' + bgImage +')'}">
      <view class="sortList">
        <view class="sortItem" @click="orderBy(0)">综合</view>
        <view class="sortItem" @click="orderBy(1)">销量
          <image :src="$store.state.imgBaseUrl + '/icon/sort.png'" class="sortImg" v-if="sortIndex != 1"></image>
          <image :src="$store.state.imgBaseUrl + '/icon/sort-up.png'" class="sortImg" v-if="ascs == sortBy[1]"></image>
          <image :src="$store.state.imgBaseUrl + '/icon/sort-down.png'" class="sortImg" v-if="descs == sortBy[1]"></image>
        </view>
        <view class="sortItem" @click="orderBy(2)">价格
          <image :src="$store.state.imgBaseUrl + '/icon/sort.png'" class="sortImg" v-if="sortIndex != 2"></image>
          <image :src="$store.state.imgBaseUrl + '/icon/sort-up.png'" class="sortImg" v-if="ascs == 'discountPrice' || ascs == 'price' "></image>
          <image :src="$store.state.imgBaseUrl + '/icon/sort-down.png'" class="sortImg" v-if="descs == 'discountPrice' || descs == 'price'"></image>
        </view>
      </view>
    </view>
    <view class="goodList" v-if="goodList && goodList.length > 0">
      <scroll-view scroll-y="true" class="" style="height: 1184rpx;" @scrolltolower="lower">
        <view class="goodItem" v-for="(item, index) in goodList" :key="index" @click="Jumpdetails(item.id)">
          <image :src="item.imageUrl" class="goodImg"></image>
          <view class="goodDes dhColor" >
            <view class="title text2Ellipsis">{{item.name}}</view>
            <view class="coupon flex" v-if="type==2">
              <view class="cp">{{item.coupon}}券</view>
              <view class="reward">奖¥{{item.profit}}</view>
            </view>
            <view class="price" :class="type ==1?'typeprice':''">
              <text class="ft36">￥{{item.price}}</text>
              <text class="orgPrice" v-if="!item.hiddenMarketPrice">原价¥{{item.retailPrice}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view style="display: flex; flex-direction: column; align-items: center;" v-if="isRequest&&(!goodList || goodList.length==0)">
      <image :src="$store.state.imgBaseUrl + '/empty_list.png'" style="width: 340rpx;height: 340rpx;margin-top: 153rpx;"></image>
      <text style="height:36rpx;font-size:38rpx;font-weight:500;color:rgba(51,51,51,1);line-height: 36rpx;">暂无数据</text>
      <text style="height:29rpx;font-size:30rpx;font-weight:500;color:rgba(102,102,102,1);line-height: 29rpx;margin-top: 35rpx;">先去逛逛吧~</text>
    </view>
  </view>
</template>
<script>
import { findByCategory,searchGoods } from '@/service/purchaseShop/goodsList.service.js'
export default {
  data() {
    return {
      type: 1,
      stype: '',
      categoryId: '',
      sortBy: ['pp.order_number', 'pp.sales_volume', 'price'],
      sortIndex: 2,
      goodList: '',
      isAsc: false,
      extentId:'',
      tagId:'',
      ascs: 'price',
      descs: '',
      page: {
        size: 10,
        current: 1,
        count: 0
      },
      name: '',
      title: '',
      isRequest:false,
      bgImage: this.$store.state.imgBaseUrl + '/goods_list_bg.png',
    }
  },
  onLoad(options) {
    // 兑换商城 还是福利商城
    // if (options.type) {
    //   this.type = Number(options.type)
    //   if (this.type === 2) {
    //     this.ascs = 'price'
    //   }
    // }
    // 什么类型接口
    if (options.stype) {
      this.stype = options.stype
    }
    // 查询类型需要的id
    if (options.id) {
      this.categoryId = options.id
      this.extentId = options.id
      this.tagId = options.id
    }
    // 搜索
    if (options.name) {
      this.name = options.name
    }
    if (options.title) {
      this.title = options.title
      uni.setNavigationBarTitle({
        title: this.title
      });
    }
  },
  created() {
    this.goListHandler()
  },
  methods: {
    Jumpdetails(id){
      uni.navigateTo({
        url: '/pages/purchaseShop/goodsDetail?id=' + id
      })
    },
    goListHandler () {
      if (this.stype === '') {
        this.getfindCatgById()
      } else if (this.stype === 'hot') {
        if (this.type === 1) {
          this.findhotSale()
        } else {
          this.findhotSaleAuto()
        }
      } else if (this.stype === 'new') {
        if (this.type === 1) {
          this.findNew()
        } else {
          this.findNewAuto()
        }
      }else if (this.stype === 'indexMore') {
        if (this.type === 1) {
          this.findbyTicket()
        } else {
          this.findbyTicketAuto()
        }
      }else if (this.stype === 'ess') {
        this.findBoutiquelist()
      }else if (this.stype === 'tagId') {
        this.findbyTagIdAuto()
      } else if (this.stype === 'search') {
        if (this.type === 1) {
          this.findsearch()
        } else {
          this.findsearchAuto()
        }
      }
    },
    orderByField (params) {
      params.ascs = this.ascs
      params.descs = this.descs
      return params
    },
    orderBy (index) {
      this.sortIndex = index
      // if (this.sortIndex ===2 && this.type === 2) {
      //   this.sortIndex = 3
      // }
      var type = this.sortBy[index]
      if (!this.ascs) {
        this.ascs = type
        this.descs = ''
      } else {
        this.descs = type
        this.ascs = ''
      }
      this.page.current = 1
      this.goListHandler()
    },
    getfindCategoryByIdAuto () {
      var params = {
        categoryId: this.categoryId,
        size: this.page.size,
        current: this.page.current
      }
      params = this.orderByField(params)
      getfindCategoryByIdAuto(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    getfindCatgById () {
      var params = {
        categoryId: this.categoryId,
        size: this.page.size,
        current: this.page.current
      }
      params = this.orderByField(params)
      findByCategory(params,(res => {
        if (res.data) {
          this.getData(res.data)
        }
      }))
    },
    // 更多兑换商品列表
    findbyTicket () {
      var params = {
        size: this.page.size,
        current: this.page.current,
        token:this.token
      }
      params = this.orderByField(params)
      findbyTicket(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    // 更多福利商品列表
    findbyTicketAuto () {
      var params = {
        size: this.page.size,
        current: this.page.current,
        token:this.token
      }
      params = this.orderByField(params)
      findbyTicketAuto(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    // 兑换热销
    findhotSale () {
      var params = {
        size: this.page.size,
        current: this.page.current
      }
      params = this.orderByField(params)
      findhotSale(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    // 福利热销
    findhotSaleAuto () {
      var params = {
        size: this.page.size,
        current: this.page.current,
        tagId:this.tagId,
      }
      params = this.orderByField(params)
      findhotSaleAuto(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    // 福利top100
    findbyTagIdAuto () {
      var params = {
        size: this.page.size,
        current: this.page.current,
        tagId:this.tagId,
      }
      findbyTagIdAuto(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    // 获取精品商品列表
    findBoutiquelist () {
      var params = {
        size: this.page.size,
        current: this.page.current,
        extentId:this.extentId,
      }
      params = this.orderByField(params)
      findBoutiquelist(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    
    // 兑换新品
    findNew () {
      var params = {
        size: this.page.size,
        current: this.page.current
      }
      params = this.orderByField(params)
      findNew(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    // 福利新品
    findNewAuto () {
      var params = {
        size: this.page.size,
        current: this.page.current
      }
      params = this.orderByField(params)
      findNewAuto(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    // 福利搜索
    findsearchAuto () {
      var params = {
        size: this.page.size,
        current: this.page.current,
        name: this.name
      }
      params = this.orderByField(params)
      findsearchAuto(params).then(res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    // 兑换搜索
    findsearch () {
      var params = {
        size: this.page.size,
        current: this.page.current,
        name: this.name
      }
      params = this.orderByField(params)
      searchGoods(params,(res => {
        if (res.data) {
          this.getData(res.data)
        }
      }))
    },
    getData (data) {
      this.isRequest = true
      if (this.page.current === 1) {
        this.goodList = data.records
      } else {
        this.goodList = this.goodList.concat(data.records)
      }
      this.page.count = data.total
    },
    lower () {
      if (this.page.count > this.goodList.length) {
        this.page.current++
        this.goListHandler()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.topPart{height: 300rpx;overflow: hidden;background-size: 100% 100%;}
.sortList{margin-top: 50rpx;line-height:  20rpx;height: 20rpx;display: flex;align-items: center;}
.topPart .sortItem{font-size: 28rpx;color: #fff;border-right: 2px solid #fff;flex:1;text-align: center;
  .sortImg{
    width: 14rpx;
    height: 24rpx;
    margin-left: 10rpx;
  }
}
.typeprice{
  position: absolute;
  bottom:20rpx;
}
.topPart .sortItem:nth-child(3){border:none}
.goodList{width: 700rpx;margin:-160rpx auto 0 auto;}
.goodList .goodItem{width: 700rpx;height: 240rpx;border-radius: 10rpx;padding: 20rpx;box-sizing: border-box;margin-bottom: 24rpx;box-shadow:0 0 15rpx rgba(0,0,0,0.16);background: #FFFFFF;}
.goodList .goodItem{
    position: relative;
  .goodImg{width: 200rpx;height: 200rpx;float: left;}
  .dhColor{color: #C2A25C;
    .cp{background:#FF3F28;}
    .reward{border:1rpx solid #FF3F28;padding: 0 20rpx;border-radius: 4rpx;line-height: 36rpx;}
  }
  .goodDes{
    margin-left: 222rpx;
    .title{color: #333;line-height: 44rpx;height: 88rpx;font-size:32rpx;}
	.text2Ellipsis {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
    .coupon{height: 36rpx;line-height: 36rpx;font-size: 24rpx;margin:18rpx 0 30rpx 0;
        .cp{
          height: 100%;
          min-width: 48rpx;
          padding: 0 20rpx;
          color: #fff;
          text-align: center;
          margin-right: 20rpx;
          border-radius: 4rpx;
        }
    }
    .price{
      font-size: 20rpx;
      line-height: 20rpx;
      .ft36{font-size: 36rpx;}
      .orgPrice{color: #ACACAC;text-decoration: line-through;margin-left: 50rpx;}
    }
  }
}
</style>
